<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2021/12/5
 * Time: 20:47
 */


?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        #divid{
            display: flex;

            justify-items: center;
        }
        p{
            font-size: larger;
        }
    </style>
</head>
<body>
<form action="page2.php" method="post" enctype="multipart/form-data">
    <input type="file" src="" name="file[]" id="file" multiple="multiple" />
    <br /><br />
    <img src="" id="imgid" alt="请选择头像">
    <br /><br />
    <button type="button" onclick=btnImg();">显示头像</button>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <input type="submit" value="提交"/>
</form>

<form action="page3.php" method="post">
    <h1>基本信息</h1>
    <br/>
    <p>姓名:</p><br/><input type="text" name="aa" id="" value="" placeholder="姓名" style="width: 500px; height: 30px;" />
    <br/><br/>
    <p>特长:</p><br/>
    <select name="bb" style="width: 500px; height: 30px;">
        <option value="">请选择您擅长的编程语言或特长(最多可选五个)</option>
        <option value="">Python</option>
        <option value="">PHP</option>
        <option value="">JavaScript</option>
        <option value="">C++</option>
    </select>
    <br/><br/>
    <p>性别</p><br/><input type="radio" name="cc" id="sex" value=""/>男
    <input type="radio" name="sex" id="sex" value=""/>女<br/>
    <br/><br/>
    <p>公司</p><br/><input type="" name="dd" id="" value="" placeholder="公司地址"  style="width: 500px;height: 30px;"/>
    <br/><br/>
    <p>职务</p> <br/><input type="" name="ee" id="" value="" placeholder="职务"  style="width: 500px;height: 30px;"/>
    <br/><br/>
    <p>微信</p><br/><input type="" name="ff" id="" value="" placeholder="微信"  style="width: 500px;height: 30px;"/>
    <br/><br/>
    <p>QQ</p> <br/><input type="" name="gg" id="" value="" placeholder="QQ"  style="width: 500px;height: 30px;"/>
    <br/><br/>
    <p>领英</p><br/><input type="" name="hh" id="" value="" placeholder="领英"  style="width: 500px;height: 30px;"/>
    <br/><br/>
    <p>微博</p><br/><input type="" name="ii" id="" value="" placeholder="微博"  style="width: 500px;height: 30px;"/>
    <br/><br/>
    <p>博客</p><br/><input type="" name="jj" id="" value="" placeholder="博客地址"  style="width: 500px;height: 30px;"/>
    <br/><br/>
    <p>所在地</p><br/>
    <select name="kk" id="provinceId" onchange="SelectProvince();" style="width: 500px;height: 30px;">
        <option value="">请选择省份</option>
    </select>
    <select name="ll" id="cityId"  onchange="SelectCity();" style="width: 500px;height: 30px;">
        <option value="-1">请选择城市</option>
    </select>
    <br/><br/>
    <p>自我介绍</p> <br/><textarea name="mm" rows="8" cols="70"></textarea>
    <br/><br/>
    <input type="submit" value="更新"/>
</form>
</body>
<script type="text/javascript">
    function btnImg(){
        var fileid = document.getElementById('file');
        var files = fileid['files'];
        var URL = window.URL || window.webkitURL;
        var imgURL = URL.createObjectURL(file[0]);
        document.getElementById('imgid').src = imgURL;
    }

    var provinces = ['北京市','上海市','福建省','广东省','浙江省'];
    var citys = [
        ['海淀区','朝阳区'],
        ['浦东','浦西'],
        ['福州市','厦门市','龙岩市','泉州市'],
        ['广州市','深圳市','佛山市'],
        ['杭州市','温州市','义乌市']
    ];

    function SelectProvince(){
        var provinceIdObj = document.getElementById('provinceId');
        var proinceIndex = provinceIdObj.value;
        var cityIdObj = document.getElementById('cityId');
        cityIdObj.innerHTML = `<option value="-1">请选择城市</option>`;
        if(proinceIndex!=-1){
            var CurrentCitys = citys[proinceIndex];
            for(var i=0;i<CurrentCitys.length;i++){
                cityIdObj.innerHTML+=`<option value="`+i+`">`+CurrentCitys[i]+`</option>`;
            }
        }
    }
    function SelectCity(){
        var provinceIdObj = document.getElementById('provinceId');
        var cityIdObj = document.getElementById('cityId');
        var provinceName =provinces[provinceIdObj.value];
        if(cityIdObj.value == -1){
            return;
        }
        var cityName =citys[provinceIdObj.value][cityIdObj.value];

        document.getElementById('selectedAddr').innerText = provinceName+":"+cityName
    }

    onload = function(){
        var provinceIdObj = document.getElementById('provinceId');
        provinceIdObj.innerHTML = `<option value="-1">请选择省份</option>`;
        for(var i=0;i<provinces.length;i++){
            provinceIdObj.innerHTML+=`<option value="`+i+`">`+provinces[i]+`</option>`;
        }
    }
</script>
</html>


